import React,{useState,useRef,useEffect} from "react";

import { Tree, Tooltip,Button, Select, Divider, message, Input, DatePicker, Form, Modal, Row, Col, Space} from "antd";
import data from "../data/dataList.json";
import Icon from "@ant-design/icons";
import Local from "./Local"
import {
  DeleteOutlined,
} from '@ant-design/icons';
import "./index.less"
import { refresh } from "less";
const { Option } = Select;



const { DirectoryTree } = Tree;

/**
 * 这是教材对照页面
 */
const { TreeNode } = Tree;
function Index() {
  const [ form ] = Form.useForm();
  const [selectedNodes,setSelectedNodes]=useState({});
  const ref = useRef()
  //资源厂商 
   const firm={
  0:'状元网',
  1:'中教云'
  } 
  
  //学科
  const subject={
   0:'语文',
   1:'数学',
   2:'英语'
  }

  //学段
  const learnPhase={
    0:'第一学期',
    1:'第二学期',
    2:'第三学期',
    3:'第四学期',
  }
  
  //版本
  const versions={
    0:'第一版本',
    1:'第二版本'
  }
 const onFinish=()=>{
   return console.log("提交成功");
 }

 const regionChange=()=>{
   return console.log("点击学科");
 }

 const learnClick=()=>{
   return console.log("点击学段");
 }

 const resetFieldsClick = () => {
  
  form.resetFields();
};

  
  const onSelect = (keys, info) => {
    //点击树节点触发
    // debugger
  console.log("点击树节点触发", keys, info.selectedNodes);
  if(info.selectedNodes[0]) setSelectedNodes(info.selectedNodes[0]);
  };
  const [checkedKeys1, setCheckedKeys1] = useState([]);
  const show=(checkedKeys)=>{
    return setCheckedKeys1(checkedKeys.checked);
  }
 
  const onExpand = () => {
    console.log("点击父");
  };

  // const loop2 = data =>
  // data.map(item => {
   
    
  //   if (item.children) {
  //     return { title:item.name,key: item.id, children: loop2(item.children) };
  //   }

  //   return {
  //     title:item.name,
  //     key: item.id,
  //   };
  // });



  // const { subject, book, catalogs, knowledgePoints, thematic, loading } = this.state
  const loop = (data, type = "catalog") => {
    return data.map((item) => {
      
      let pp;
      if (type === "catalog") {
        pp = (
          <span className="catalog-name">
            {
              <Tooltip
                placement="topLeft"
                title={`${item.name}(${item.resourceSum || 0})`}
              >
                <span>{`${item.name}`}</span>
               
                
              </Tooltip>
            }
            <p className="catalog-resource-count">{`(${
              item.resourceSum || 0
            })`}</p>
          </span>
        );
      } else {
        pp = (
          <span nodeType="know" className="catalog-name">
            <Icon style={{ marginRight: "10px" }} type="star" />
            {
              <Tooltip
                placement="topLeft"
                title={`${item.knowledgePointName}(${item.resourceSum || 0})`}
              >
                <span>{`${item.knowledgePointName}(${item.resourceSum})`}</span>
                
                
              </Tooltip>
            }
          </span>
        );
      }
      if (item.children) {
        return (
          <TreeNode title={pp} key={item.id} dataRef={item} isLeaf={item.leaf}>
            {loop(item.children)}
          </TreeNode>
        );
      }
      if (item.pointList && item.pointList.length > 0) {
        
        item.pointList = item.pointList.map((node) => {
          return { ...node, parentCatalogId: item.id };
        });

        if (type == "catalog") {
          //pp = <span className="catalog-name">{`${item.name}(${item.resourceSum})`}<Icon style={{marginLeft:'10px'}} type="star" /></span>

          pp = (
            <span className="catalog-name">
              {`${item.name}(${item.resourceSum})`.length > 5 ? (
                <Tooltip
                  placement="topLeft"
                  title={`${item.name}(${item.resourceSum})`}
                >
                  <span>{`${item.name}(${item.resourceSum})`}</span>
                  
                
                </Tooltip>
              ) : (
                <span>{`${item.name}(${item.resourceSum})`} 
                
                </span>
                
              )}
              <Icon style={{ marginLeft: "10px" }} type="star" />
            </span>
          );
        }

        return (
          <TreeNode title={pp} key={item.id} dataRef={item} isLeaf={false}>
            {loop(item.pointList, "knowledge")}
          </TreeNode>
        );
      }
      return <TreeNode key={item.id} title={pp} dataRef={item} />;
    });
  };

  //删除节点
const del=(index)=>{

  checkedKeys1.splice(index,1)
  setCheckedKeys1([...checkedKeys1])
    ref.current.check({checked:[...checkedKeys1]});

}
const loop2 = data =>{
  return  data.map(item => { 
  
   
     if (item.children) {
       return { title:item.name,key: item.id, children: loop2(item.children) };
     }
    else if(item.pointList && item.pointList.length > 0){
       return {title:item.name,key:item.id,children:loop2(item.pointList)}
     }
    else if(item.knowledgePointName){
       return {
         title:item.knowledgePointName,
         key: item.id,
       }
     }
    
     return {
       title:item.name,
       key: item.id,
     };
   });
 }

  return (
    <div className="contrast">
      <div className="contrast-top">
        <Form
          className="search-form"
          form={form}
          layout="inline"
          onFinish={onFinish}
        >
          <Form.Item name="firm">
            <Select placeholder="资源厂商" style={{ width: 120 }}>
              {Object.keys(firm).map((key) => (
                <Option key={key} value={key}>
                  {firm[key]}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="provinceCode">
            <Select
              placeholder="学科"
              onChange={regionChange}
              style={{ width: 120 }}
            >
              {Object.keys(subject).map((key) => (
                <Option key={key} value={key}>
                  {subject[key]}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="cityCode">
            <Select
              placeholder="学段"
              onClick={learnClick}
              style={{ width: 120 }}
            >
              {Object.keys(learnPhase).map((key) => (
                <Option key={key} value={key}>
                  {learnPhase[key]}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item name="managerId">
            <Select placeholder="版本" style={{ width: 120 }}>
              {Object.keys(versions).map((key) => (
                <Option key={key} value={key}>
                  {versions[key]}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item className="search-form-submit">
            <Button  htmlType="submit" type="primary">
              查询
            </Button>
            <Button onClick={resetFieldsClick}>重置</Button>
          </Form.Item>
        </Form>
      </div>
      <div className="contrast-main">
        <Row align="middle" justify="space-around" gutter={[32, 32]}>
          <Col span={8}>
            <div>
              <span>三方教材</span>
            </div>
          </Col>
          <Col span={8}> 关联关系</Col>
          <Col span={8}>
            <div>
              <span>我方教材</span>
            </div>
          </Col>
        </Row>
        <Row align="top" justify="space-between" gutter={[32, 16]} className="contrast-main-box-shadow">
          <Col span={8} className="contrast-main-box-shadow">
            <Tree onExpand={onExpand} draggable height={700} onSelect={onSelect}>
              {loop(data.result)}
            </Tree>
          </Col >
              <Col span={8} className="contrast-main-box-shadow">
                {selectedNodes.dataRef?(selectedNodes.dataRef.name||selectedNodes.dataRef.knowledgePointName):""}
                <div>
                      {checkedKeys1.map((item,i)=>{
                        return <div key={i}> {item}-----<DeleteOutlined onClick={() =>del(i)}/></div>
                      })}  
              </div>
              </Col>
              
          <Col span={8} className="contrast-main-box-shadow">
                  <Local  show={show} onRef={ref}></Local>
          </Col>
        </Row>
      </div>
    </div>
  );
}
export default Index;
